<template>
	<view>
		<view class="contract">
			<view class="title">
				<view class="contract-title">请选择实名认证方式</view>
				<view class="yellow-line"></view>
			</view>
		</view>
		<view class="sel-way">
			<view class="face active" @click="selFace(0)">
				<view class="img">
					<image src="../../static/images/face.jpg" mode=""></image>
					<view class="thirty-seconds">30秒搞定</view>
				</view>
				<text>人脸识别</text>
				<view class="iconfont icontick"></view>
			</view>
			<view class="info" @click="selFace(1)">
				<view class="img">
					<image src="../../static/images/info.jpg" mode=""></image>
				</view>
				<text>资料认证</text>
				<view class="iconfont icontick"></view>
			</view>
		</view>
		<view class="btn" @click="startApprove">
			<Dbutton :btnTxt="btnTxt"></Dbutton>
		</view>
		<view class="information">
			<view class="item">
				<view class="iconfont iconanquan"></view>
				<view class="item-info">
					<view class="title">安全保障 <text>金融级别安全防护体系</text></view>
					<view class="info">ISO27001信息安全认证，公安三所eID电子身份系统对接认证，公安部等级保护测评三级，为用户带来与银行同等的安全防护体系。</view>
				</view>
			</view>
			<view class="item">
				<view class="iconfont iconshenfenzheng"></view>
				<view class="item-info">
					<view class="title">身份认证 <text>严格遵照《电子签名法》相关规定</text></view>
					<view class="info">联合数字认证中心、结合人脸识别技术，确保签名主体的真实性和有效性</view>
				</view>
			</view>
			<view class="item">
				<view class="iconfont iconmima"></view>
				<view class="item-info">
					<view class="title">文件加密 <text>军用标准加密文件</text></view>
					<view class="info">文件存储、传输采取高强度加密技术，确保文件仅对本人可见。</view>
				</view>
			</view>
			<view class="item">
				<view class="iconfont iconfangcuangai_anyu"></view>
				<view class="item-info">
					<view class="title">防止篡改 <text>商用平台应用区块链技术先驱者</text></view>
					<view class="info">通过区块链技术、PDF技术有效固化文件内容，签约主体、签约时间不可篡改，同时支持在线查验合同真伪。</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import Dbutton from '../../components/button.vue'
	import { getUserState } from '../../api/indexApi.js'
	export default {
		data() {
			return {
				btnTxt: '开始认证',
				verified_way: 0
			}
		},
		onLoad() {
			
		},
		methods: {
			selFace(index) {
				let sel = document.querySelector('.sel-way')
				if (index === 0) {
					sel.querySelector('.face').className = 'face active'
					sel.querySelector('.info').className = 'info'
					sel.querySelector('.face .icontick').style.display = 'block'
					sel.querySelector('.info .icontick').style.display = 'none'
					this.verified_way = 9
				} else {
					sel.querySelector('.face').className = 'face'
					sel.querySelector('.info').className = 'info active'
					sel.querySelector('.face .icontick').style.display = 'none'
					sel.querySelector('.info .icontick').style.display = 'block'
					this.verified_way = 4
				}
			},
			async startApprove() {
				const res = await getUserState({verified_way: this.verified_way})
				console.log(res)
				window.location.href = res.data.data.url
			}
		},
		components: {
			Dbutton
		}
	}
</script>

<style lang="scss">
	.contract {
		padding-top: 77rpx;
		.title {
			margin-left: 50rpx;
			font-family: PingFangSC-Semibold;
			font-size: 38rpx;
			font-weight: 600;
			color: #191919;
			position: relative;
			.contract-title {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
			.yellow-line {
				width: 356rpx;
				height: 14rpx;
				background-color: #fedb0d;
				position: absolute;
				left: -6rpx;
				bottom: -52rpx;
			}
		}
	}
	.sel-way {
		margin-top: 112rpx;
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
		padding: 0 16rpx;
		.face,.info {
			width: 330rpx;
			height: 230rpx;
			background-color: #fff;
			position: relative;
			border: solid 2rpx transparent;
			.img {
				width: 330rpx;
				height: 230rpx;
				margin-bottom: 10rpx;
				position: relative;
				image {
					width: 100%;
					height: 100%;
				}
				.thirty-seconds {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					color: #2975ff;
					font-size: 22rpx;
					width: 120rpx;
					height: 40rpx;
					background-color: #bcd8ff;
					border-radius: 20rpx 20rpx 20rpx 0rpx;
					line-height: 40rpx;
				}
			}
			text-align: center;
			box-shadow: 0rpx 8rpx 68rpx 0rpx rgba(0, 0, 0, 0.1);
			text {
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				color: #3f3f3f;
				margin-top: 20rpx;
			}
			.icontick {
				width: 36rpx;
				height: 36rpx;
				background-color: #fedb0d;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				bottom: -14rpx;
				transform: translateX(-50%);
				display: none;
			}
		}
		.active {
			border: solid 2rpx #fedb0d;
		}
		.face .icontick {
			display: block;
		}
	}
	.btn {
		margin: 100rpx 0 60rpx;
	}
	.information {
		margin: 0 30rpx 63rpx;
		background-color: #f9f9f9;
		border-radius: 2rpx;
		font-family: PingFangSC-Medium;
		padding: 70rpx 18rpx 70rpx 35rpx;
		.item {
			display: flex;
			font-family: PingFangSC-Medium;
			margin-bottom: 50rpx;
			.iconfont {
				margin-top: 2rpx;
				margin-right: 15rpx;
				font-size: 34rpx;
			}
			.item-info {
				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #4d4d4d;
					text {
						font-size: 22rpx;
						font-weight: normal;
						color: #4d4d4d;
						padding-left: 16rpx;
					}
				}
				.info {
					font-size: 22rpx;
					color: #9a9a9a;
					margin-top: 6rpx;
				}
			}
		}
		.item:last-child {
			margin-bottom: 0;
		}
	}
</style>
